<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form searchForm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">用户名：</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" id="userName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal" id="queryBut">搜索</button>
            </div>
        </div>
    </div>
</form>
<table class="layui-hide" id="dataList" lay-filter="dataList"></table>

<script type="text/html" id="toolbarOrg">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="del">批量踢用户下线</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">踢用户下线</a>
</script>

<script type="text/javascript" src="/lib/layui/layui.js"></script>
<script src="/static/js/main.js"></script>
<script>
    var configureCom = {};
    layui.use(['jquery', 'configureCom', 'configure', 'sessionFun', 'table', 'matchDict'], function () {
        var $ = layui.jquery;
        var configure = layui.configure;
        var table = layui.table;
        var sessionFun = layui.sessionFun;
        configureCom = layui.configureCom;
        var cols = [[
            {type: 'checkbox', fixed: 'left',width:'40'},
            {field: 'userName', title: '用户名',width:'200'},
            {field: 'userId', title: '用户ID',width:'300'},
            {field: 'token', title: '用户Token',width:'300'},
            {field: 'updateTime', title: '更新时间',width:'180'},
            {field: 'expireTime', title: '过期时间',width:'180'},
            {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 100}
        ]];
        configureCom.tableRender(configure.ONLINE_USER_LIST, {}, cols, 'dataList', 10, 'full-200', 'toolbarOrg');
        //头工具栏事件
        table.on('toolbar(dataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            sessionFun.remove(configure.SESSION_LIST_DATA);
            switch (obj.event) {
                case 'del':
                    var data = checkStatus.data;
                    if (!data.length) {
                        top.layer.alert('请您至少选择一条数据后再提交！');
                        return false;
                    }
                    top.layer.confirm('您真的要踢掉选中的用户吗？', function (index, layero) {
                        top.layer.close(index);
                        var userIds = '';
                        $(data).each(function (index, item) {
                            if (!index) {
                                userIds = item.userId;
                            } else {
                                userIds += ',' + item.userId;

                            }
                        });
                        deleteFun(userIds);
                    });
                    break;
            }
        });
        //每行操作
        table.on('tool(dataList)', function (obj) {
            var data = obj.data;
            sessionFun.set(configure.SESSION_LIST_DATA, data);
            if (obj.event === 'del') {//查看详情
                deleteFun(data.userId);
            }
        });

        function deleteFun(userIds) {
            top.layer.confirm('您真的要踢掉这个用户吗？', function () {
                configureCom.postDataAjax(configure.ONLINE_USER_DELETE, {userIds: userIds}).then(function (res) {
                    if (res.code == 0) {
                        top.layer.msg('您成功踢掉了这个用户！');
                        configureCom.tableReload(true);
                    } else {
                        top.layer.alert('踢人失败，请重新操作！');
                    }
                });
            });
        }

    });

</script>
</body>
</html>